<template>
  <scroll-view @scrolltolower="handleTolower" class="recommend_view" scroll-y v-if="recommends.length>0">
    <!-- 推荐 -->
    <view class="recommend_wrap">
      <navigator class="recommend_item"
                 v-for="item in recommends"
                 :key="item.id"
				 :url="`/pages/album/index?id=${item.target}`"
                 >
        <image mode="widthFix"
               :src="item.thumb"/>
      </navigator>
    </view>
	<!-- 推荐结束 -->
	<!-- 月份开始 -->
	<view class="monthes_wrap">
		<view class="monthes_title">
			<view class="monthes_title_info">
				<view class="monthes_info">
					<text>{{monthes.DD}}/</text>
					{{monthes.MM}}月
				</view>
				<view class="monthes_text">{{monthes.title}}</view>
			</view>
			<view class="monthes_title_more">更多></view>
		</view>
		<view class="monthes_content">
			<view class="monthes_item" v-for="(item, index) in monthes.items" :key="item.id">
				<go-detail :list="monthes.items" :index="index">
				<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
				</go-detail>
			</view>
		</view>
	</view>
	<!-- 月份结束 -->
	<!-- 热门开始 -->
	<view class="hots_wrap">
		<view class="hots_title">
			<text> 热门 </text>
		</view>
		<view class="hots_content">
			<view class="hots_item" v-for="(item, index) in hots" :key="item.id">
				<go-detail :list="hots" :index="index">
				<image :src="item.thumb" mode="widthFix"></image>
				</go-detail>
			</view>
		</view>
	</view>
	<!-- 热门结束 -->
  </scroll-view>
</template>

<script>
import moment from 'moment';
import goDetail from '@/components/goDetail';
export default {
  data(){
    return{
    // 推荐列表
    recommends: [],
	monthes: [],
	// 热门
	hots: [],
	// 请求的参数
	params: {
		// 获取几条数据
		limit: 30,
		// 关键字
		order: "hot",
		// 要跳过几条
		skip: 0
	},
	// 是否还有下一页
	hasMore: true
    }
  },
  components:{
	goDetail  
  },
  mounted() {
	  uni.setNavigationBarTitle({
	  		title:"推荐"
	  })
    this.getList();
  },
  methods:{
	  // 获取接口数据
	  getList() {
		  this.request({
		    url: "http://service.picasso.adesk.com/v3/homepage/vertical",
		    data: this.params,
		  }).then(result=>{
		    console.log(result);
			// 判断还有没有下一页数据
			if(result.res.vertical.length===0){
				this.hasMore = false;
				return;
			}
		    // 推荐模块
			if(this.recommends.length === 0){
				this.recommends = result.res.homepage[1].items;
				// 月份模块
				this.monthes = result.res.homepage[2];
				// 将时间戳改成moment格式
				this.monthes.MM = moment(this.monthes.stime).format("MM");
				this.monthes.DD = moment(this.monthes.stime).format("DD");
			}
		   
		    // 获取热门数据 数组拼接
		    this.hots = [...this.hots,...result.res.vertical];
		  })
	  },
	  // 滚动事件
	  handleTolower(){
		 /* 参数*/
		 if(this.hasMore){
			 this.params.skip+=this.params.limit;
			 this.getList();
		 }else{
			 //弹窗
			uni.showToast({
			 	title:"我也是有底线的",
				icon:"none"
			})
		 }
		 
	  }
  }
}
</script>

<style lang="scss" scoped>
	.recommend_view {
		height: calc( 100vh - 36px );
	}
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}

.monthes_wrap {
  .monthes_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .monthes_title_info {
      color: $color;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .monthes_info {
        text {
          font-size: 36rpx;
        }
      }

      .monthes_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }

    .monthes_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }

  .monthes_content {
    display: flex;
    flex-wrap: wrap;
    .monthes_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 20rpx solid $color;
      padding-left: 20rpx;
      font-size: 34rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
</style>